<template>
  <el-checkbox-group v-model="selected" @change="onChange">
    <el-checkbox :label="item.value" v-for="(item, index) in options" :key="index">{{item.label}}</el-checkbox>
  </el-checkbox-group>
</template>

<script>
  export default {
    name: 'CheckboxGroup',
    props: {
      value: {
        type: String,
        default: null
      },
      options: {
        type: Array,
        default: null
      }
    },
    data() {
      return {
        selected: []
      };
    },
    watch: {
      value: {
        handler(val) {
          if (this.value) {
            this.selected = this.value.split(',')
          } else {
            this.selected = []
          }
        },
        immediate: true
      }
    },

    methods: {
      onChange(e) {
        this.$emit('input', e.join(','));
      }
    }
  };
</script>
